<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Yeffect-test-case</title>
<meta name="viewport"content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable"content="yes">
<meta name="apple-mobile-web-app-status-bar-style"content="black">
<meta http-equiv="Expires"content="0">
<meta http-equiv="pragma"content="no-cache">
<meta http-equiv="Cache-Control"content="no-store, must-revalidate">
<meta http-equiv="expires"content="Wed, 26 Feb 1997 08:21:57 GMT">
</head>
<link rel="stylesheet"type="text/css"href="../../css/reset.css">
<script src="../../script/libs/jquery-1.9.1.min.js"></script>
<script>
var res = ['clickTabs'];
var html = [];
var timestamp = Date.parse(new Date());

for(s in res) {
    html.push('<script type="text/javascript"src="../../script/componets/'+res[s]+'.js?v='+timestamp+'"><\/script>');
}

document.write(html.join(''));

</script>
<style type="text/css">

.tabNavs {
    height: 35px;
    width: 100%;
    border: 1px solid #aaa;
    border-bottom: none;
    background: #eee;
    border-right: 0px;
    position: relative;
}

.tabNavs a {
    display: block;
    height: 35px;
    line-height: 35px;
    width: 33%;
    border-right: 1px solid #aaa;
    float: left;
    text-align: center;
    color: #333;
}

.tabNavs a.current {
    background: #fff;
    height: 36px;
}

.tabContents {
    display: none;
    width: 100%;
    height: 100px;
    border: 1px solid #aaa;
    border-top:none;
    background: #fff;
    margin-top: -1px;
    font-size: 14px;
    box-sizing: border-box;
    padding:10px 24px;
    font-size: 14px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

</style>
</style>
<body>
<div>
    <div class="tabNavs">
        <a href="javascript:void(0)">item1</a>
        <a href="javascript:void(0)">item2</a>
        <a href="javascript:void(0)">item3</a>
    </div>
    <div class="tabContents">
        1.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <div class="tabContents">
        2.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <div class="tabContents">
        3.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
    </div>
</div>
<br>
<div>
    <div class="tabNavs"><a href="javascript:void(0)">选项A</a><a href="javascript:void(0)">选项B</a><a href="javascript:void(0)">选项C</a></div>
    <div class="tabContents">
        内容A
    </div>
    <div class="tabContents">
        内容B
    </div>
    <div class="tabContents">
        内容C
    </div>
</div>
<script type="text/javascript">
    Yeffect.clickTabs(".tabNavs a",".tabContents","current");;
</script>
</body>
</html>
